<template>
  <div class="login">
    <div class="lg_hd bbz_accounts_logo_hd">
      <h1 class="ctriplogo_login ctriplogoindex">
        <router-link to="/hotel" title="旅行网">旅行网</router-link>
      </h1>
      <span id="bbz-accounts-assist" class="assist"><em class="ico-assist"></em>网站无障碍</span>
    </div>
    <div class="tips-security"><i class="icon-warn"></i>依据《网络安全法》，为保障您相关功能的正常使用，账号需绑定手机，如您未绑定则登录后会引导您操作绑定。 新版<a href="javascript:;">《隐私政策》</a>已上线，感谢您的支持。
    </div>
    <div class="lg_bd" id="lg_bd">
      <!-- 广告图片区域 -->
      <div class="lg_banner_wrap">
        <div id="bannerpic" style="overflow: hidden; width: 100%; height: 540px; position: relative;">
          <div class="adsdk_banner_flag" style="transform: scale(1) translateY(0px) translateX(0px); transform-origin: 0px 0px; width: 1920px; height: 540px; position: relative;">
            <div creativeid="8960" id="adsdk_8960" data-adsdk-firstimp="0" style="width: 1920px; height: 100%; background-repeat: no-repeat; background-size: 100% 100%; position: relative; border-radius: 0px; overflow: hidden; background-color: rgb(255, 255, 255);"><img src="../assets/images/zg051a0000018ihml577E.jpg" style="width: 1920px; height: 540px; left: 0px; top: 0px; position: absolute; border-radius: 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 0px;">
              <div style="opacity: 0.3; background: rgb(0, 0, 0); height: 20px; border-radius: 0px 4px 0px 0px; position: absolute; z-index: 9999; padding: 0px 4px; display: flex; align-items: center; left: 0px; bottom: 0px;"><span style="opacity: 0.9; color: rgb(255, 255, 255); font-size: 12px; font-family: &quot;Microsoft YaHei&quot;; letter-spacing: 0px; display: inline-block; text-align: center;">广告</span></div>
            </div>
          </div>
        </div>
      </div>

      <div class="mod-box" style="z-index: 10;">
        <LoginAccount v-if="showNum==1"></LoginAccount>
        <LoginCode v-else-if="showNum==2"></LoginCode>
        <LoginPhone v-else></LoginPhone>
      </div>
    </div>
  </div>
</template>

<script>
import LoginAccount from '@/components/LoginAccount.vue'
import LoginCode from '@/components/LoginCode.vue'
import LoginPhone from '@/components/LoginPhone.vue'
import { mapState } from 'vuex'
export default {
  name: 'Login',
  data() {
    return {}
  },
  components: {
    LoginAccount,
    LoginCode,
    LoginPhone
  },
  computed: {
    ...mapState({
      showNum: state => state.login.loginShowNum
    })
  }
}
</script>

<style lang="scss" scoped>
.mod-box:after,
.mod-box:before {
  display: table;
  content: '';
}
.mod-box:after {
  clear: both;
}
.lg_hd {
  width: 980px;
  height: 90px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 10px;
  .ctriplogo_login {
    float: left;
    width: 203px;
    padding-top: 22px;
    margin-right: 10px;
    a {
      display: block;
      width: 100%;
      height: 34px;
      overflow: hidden;
      text-indent: -999em;
      background: url('../assets/images/c_logo2020.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}
.bbz_accounts_logo_hd .assist {
  float: right;
  padding: 0 15px 0 13px;
  line-height: 90px;
  color: #666;
  cursor: pointer;
  font-size: 12px;
  .ico-assist {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 2px;
    overflow: hidden;
    background: url('../assets/images/icon-assist.png') no-repeat center center;
  }
}
.tips-security {
  width: 100%;
  padding: 7px 0;
  line-height: 16px;
  background: #fffcd8;
  font-family: 'Microsoft yahei';
  font-size: 12px;
  color: #666;
  text-align: center;
  vertical-align: middle;
  .icon-warn {
    background-image: url('../assets/images/un_bg_pop.png');
    background-repeat: no-repeat;
    margin-right: 6px;
    vertical-align: middle;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-position: 0 -191px;
  }
  a {
    color: #666;
  }
}
.lg_bd {
  width: 100%;
  min-height: 540px;
  margin-top: -40px;
  position: relative;
  .lg_banner_wrap {
    position: absolute;
    width: 100%;
    height: 540px;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  .mod-box {
    width: 980px;
    margin: 0 auto;
    z-index: 10;
  }
}
.lg_hd .ctriplogo_login {
  float: left;
  width: 200px;
  padding-top: 12px;
  margin-right: 10px;
  height: 60px;
  a {
    height: 60px;
  }
}
</style>